<template>
  <div class="app-container">
    <div
      class="header"
      style="display: flex; justify-content: space-between"
    >
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item>
          <el-button
            icon="refresh"
            color=" rgb(69, 76, 105)"
            style="color: #fff"
            @click="resetQuery"
          />
        </el-form-item>
        <el-form-item>
          <div
            style="
              background-color: #66ccff;
              color: #fff;
              border-radius: 5px;
              padding: 2px;
              font-weight: bolder;
            "
            @click="switchTable"
          >
            {{ isWithdrawal ? "切换余额记录" : "切换提现记录" }}
          </div>
        </el-form-item>
        <el-form-item>
          <div style="display: flex">
            可提现余额：
            <div style="font-size: 15px; font-weight: bolder">
              {{ "200000" }}
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tixian">提现</el-button>
        </el-form-item>
      </el-form>
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item
          label=""
          prop="state"
        >
          <el-select
            style="width: 190px"
            v-model="queryParams.sourceType"
            placeholder="请选择来源类型"
            clearable
            @keyup.enter="handleQuery"
          >
            <el-option
              v-for="(item, index) in allSourceType"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label=""
          prop="state"
        >
          <el-select
            style="width: 190px"
            v-model="queryParams.source"
            placeholder="请选择来源路径"
            clearable
            @keyup.enter="handleQuery"
          >
            <el-option
              v-for="(item, index) in allSource"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label=""
          prop="state"
        >
          <el-select
            style="width: 190px"
            v-model="queryParams.state"
            placeholder="请选择提现状态"
            clearable
            @keyup.enter="handleQuery"
          >
            <el-option
              v-for="(item, index) in allState"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label=""
          prop="applicationTime"
        >
          <el-date-picker
            clearable
            v-model="createTime"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="申请开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="info"
            icon="Search"
            @click="handleQuery()"
          />
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="loading"
      v-if="isWithdrawal"
      :data="withdrawalList"
    >
      <el-table-column
        label="申请时间"
        align="center"
        prop="applicationTime"
      />
      <el-table-column
        label="申请金额"
        align="center"
        prop="amount"
      />
      <el-table-column
        label="提现状态"
        align="center"
        prop="state"
      >
        <template #default="scope">
          {{ scope.row.state == 0 ? '待审核' : scope.row.sate == 1 ? '通过' : scope.row.state == 2 ? '驳回' : '' }}
        </template>
      </el-table-column>
      <el-table-column
        label="处理时间"
        align="center"
        prop="dealTime"
        ><template #default="scope">
          <span>{{
            parseTime(scope.row.dealTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template></el-table-column
      >
    </el-table>
    <el-table
      v-else
      v-loading="loading"
      :data="balanceList"
    >
      <el-table-column
        label="来源路径"
        align="center"
        prop="source"
      >
        <template #default="scope">
          <span>{{ scope.row.source == '0' ? '订单收入' : scope.row.source == '1' ? 
          '订单支出' : scope.row.source == '2' ? '提现' : scope.row.source == '3' ? '平台费包干' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="来源类型"
        align="center"
        prop="sourceType"
      >
          <template #default="scope">
            <span>{{scope.row.sourceType == '0'?'特快车' : scope.row.sourceType == '1' ? '顺风车' : ''}}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="时间"
        align="center"
        prop="operateTime"
        ><template #default="scope">
          <span>{{
            parseTime(scope.row.operateTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template></el-table-column
      >
      <el-table-column
        label="金额"
        align="center"
        prop="balance"
      >
          <template #default="scope">
            <span style="color: rgb(0,100,0);" v-if="scope.row.balance > 0">+{{ scope.row.balance }}</span>
            <span style="color: red;" v-else-if="scope.row.balance < 0">-{{ scope.row.balance }}</span>
          </template>
      </el-table-column>
    </el-table>
     <!-- 添加或修改内容设置对话框 -->
     <el-dialog
      title="申请提现"
      v-model="istixian"
      width="500px"
      style="font-weight: bold;"
      append-to-body
    >
      <el-form
        ref="setRef"
      >
        <el-form-item
           label="提现金额"
        >
          <el-input
            style="margin-left: 15px;"
            v-model="formxian.amount"
            placeholder="请输入提现金额"
          />
        </el-form-item>
        <el-form-item
           label="支付宝账号"
        >
          <el-input
            v-model="formxian.zhanghao"
            placeholder="请输入支付宝账号"
          />
        </el-form-item>
        <el-form-item
           label="支付宝姓名"
        >
          <el-input
            v-model="formxian.zhanghao"
            placeholder="请输入支付宝姓名"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button
            style="width: 385px;"
            type="primary"
            @click="shengqin"
            >申请</el-button
          >
        </div>
      </template>
    </el-dialog>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup name="Branch">
import useUserStore from "@/store/modules/user";
import {
  listWithdrawList,
  listBalanceList,
  auditBranch,
  withdrawBranch,
} from "@/api/system/branch";
import { ref } from "vue";
const isWithdrawal = ref(false);
const total = ref(0);
const withdrawalList = ref([]);
const balanceList = ref([]);
const createTime = ref([]);
const showSearch = ref(true);
const userId = ref(useUserStore().id);
//提现的弹窗
const istixian = ref(false);

const formxian = ref({
     //提现金额
     amount: 'fgf',
     //字符包账号
     zhanghao:'123',
     //支付宝姓名
     zifuname:'',
     state: '',
     branchId: '',
     userId: '',
})
const data = reactive({
  allState: [
    {
      label: "待审核",
      value: 0,
    },
    {
      label: "通过",
      value: 1,
    },
    {
      label: "驳回",
      value: 2,
    },
  ],
  allSource: [
    {
      label: "订单收入",
      value: 0,
    },
    {
      label: "订单支出",
      value: 1,
    },
    {
      label: "提现",
      value: 2,
    },
    {
      label: "平台费包干",
      value: 3,
    },
  ],
  allSourceType: [
    {
      label: "特惠快车",
      value: 0,
    },
    {
      label: "顺风车",
      value: 1,
    },
  ],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams, allState, allSource, allSourceType } = toRefs(data);

function getList() {
  queryParams.value.userId = userId.value;
  console.log(userId.value,typeof userId.value,'用户id有没有');
  console.log(isWithdrawal.value,'传递的参数又是什么');
  if (isWithdrawal.value) {
    console.log('当前是提现列表')
    console.log('请求的参数对不对',queryParams.value);
    listWithdrawList(queryParams.value).then((res) => {
      console.log(res,'返回的提现记录数据0000000000')
      total.value = res.total;
      withdrawalList.value = res.rows;
      console.log(withdrawalList.value,'返回的提现记录数据lllllllll')
    });
  } else {
    console.log('当前是余额列表-----请求的参数对不对',queryParams.value)
    listBalanceList(queryParams.value).then((res) => {
      console.log(res,'返回的余额记录数据0000000000000')
      total.value = res.total;
      balanceList.value = res.rows;
    });
  }
}

function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  };
  handleQuery();
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  if (createTime.value && createTime.value.length >= 2) {
    queryParams.value.startSift = createTime.value[0];
    queryParams.value.endSift = createTime.value[1];
  } else {
    queryParams.value.startSift = "";
    queryParams.value.endSift = "";
  }
  getList();
}

function switchTable() {
  isWithdrawal.value = !isWithdrawal.value;
  getList();
}

function tixian(){
  istixian.value = true;
}


function shengqin() {
  console.log(this,'this是谁')
}

getList();
</script>
